<extend name="Layout/application"/>

<block name="content">
   <section class="content-header">
      <h1>
         文章列表
         <small>Article index</small>
      </h1>
      <ol class="breadcrumb">
         <li><a href="#"><i class="fa fa-dashboard"></i> Article</a></li>
         <li class="active">Index</li>
      </ol>
   </section>

   <section class="content">

      <include file="Layout/_flash"/>

      <div class="row">
         <div class="col-xs-12">
            <div class="box">
               <div class="box-header">
                  <a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新"><i
                       class="fa fa-refresh"></i></a>
                  <a href="/admin/articles/create" class="btn btn-success btn-add" title="添加"><i class="fa fa-plus"></i>
                     添加</a>
                  <a href="javascript:;" class="btn btn-danger btn-del delete_all" title="删除"><i
                       class="fa fa-trash"></i> 删除</a>
                  <a href="/admin/articles/export_article" class="btn btn-primary btn-add" title="导出"><i
                       class="fa fa-sign-in"></i>
                     导出</a>

                  <!--搜索-->
                  <div class="box-tools" style="top:10px;">
                     <form action="" method="GET">
                        <div class="input-group input-group-sm" style="width:260px;">

                           <div class="input-group-btn">
                              <button type="button" class="btn btn-default dropdown-toggle search-drop-btn"
                                      data-toggle="dropdown" aria-expanded="false">
                                 <span>搜索</span>
                                 <i class="fa fa-caret-down"></i>
                              </button>
                              <input type="hidden" class="search_field" name="search_field" value="title|category_id">
                              <ul class="dropdown-menu search-ul">
                                 <li><a href="javascript:void(0)" data-field="title|category_id">搜索</a></li>
                                 <li><a href="javascript:void(0)" data-field="title">标题</a></li>
                                 <li><a href="javascript:void(0)" data-field="category_id">所属分类ID</a></li>
                              </ul>
                           </div>
                           <input type="text" name="title" class="form-control pull-right"
                                  value="{{:input('get.name')}}" placeholder=""/>
                           <div class="input-group-btn">
                              <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>

               <!-- /.box-header -->
               <div class="box-body">
                  <table id="example2" class="table table-bordered table-hover">
                     <thead>
                     <tr>
                        <th>
                           <input type="checkbox" class="check_all">
                        </th>
                        <th>ID <a href="" class="fa fa-sort"></a></th>
                        <th>文章分类</th>
                        <th>文章标题</th>
                        <th>缩略图</th>
                        <th>点击量 <a href="" class="fa fa-sort"></a></th>
                        <th>是否置顶</th>
                        <th>是否推荐</th>
                        <th>排序 <a href="" class="fa fa-sort"></a></th>
                        <th>创建时间 <a href="" class="fa fa-sort"></a></th>
                        <th>更新时间 <a href="" class="fa fa-sort"></a></th>
                        <th>操作</th>
                     </tr>
                     </thead>
                     <tbody>

                     <volist name="articles" id="article">
                        <tr data-id="{{$article.id}}">
                           <td>
                              <input type="checkbox" class="checked_id" name="check_id[]" value="{{$article.id}}">
                           </td>
                           <td>{{$article.id}}</td>
                           <td>{{$article.category.name}}</td>
                           <td>{{$article.title}}</td>
                           <td>
                              <img src="{{$article.photo.image}}" style="width: 40px;height: 30px;" alt="">
                           </td>
                           <td>{{$article.view_num}}</td>
                           <td>
                              {{:is_something($article,'is_top')}}
                           </td>
                           <td>
                              {{:is_something($article,'is_recommend')}}
                           </td>
                           <td>
                              <input type="hidden" name="id[]" value="{{$article.id}}">
                              <input type="text" name="sort[]" class="sort" value="{{$article.sort_order}}"
                                     style="width: 50px;">
                           </td>
                           <td>{{$article.create_at}}</td>
                           <td>{{$article.update_at}}</td>
                           <td>
                              <a href="{{:url('articles/edit',['id'=>$article.id])}}" title="编辑"><i
                                   class="fa fa-pencil"></i></a>
                              <a href="javascript:;" class="delete" title="删除" style="margin-left: 15px;color:red;"><i
                                   class="fa fa-trash"></i></a>
                           </td>
                        </tr>
                     </volist>

                     </tbody>
                  </table>

                  <div class="box-footer">
                     共 {{$articles->total()}} 条数据
                     <div class="page">
                        {{$articles->render()|raw}}
                     </div>
                  </div>
               </div>
               <!-- /.box-body -->
            </div>
            <!-- /.box -->
         </div>
         <!-- /.col -->
      </div>
      <!-- /.row -->
   </section>

</block>

<block name="js">
   <script>
      $(function () {
         // 搜索
         $('body').off('click', '.search-ul li a');
         $('body').on("click", '.search-ul li a', function (event) {
            var _this = $(this);
            var _field = _this.data('field');
            var _html = _this.html();
            var _box = _this.closest('.input-group-btn');
            _box.find('.search_field').val(_field);
            _box.find('.dropdown-toggle span').html(_html);
            _box.next('input').attr('placeholder', _html);
         });

         //刷新
         $('.btn-refresh').click(function () {
            window.location.reload();
         });

         //删除文章
         $('.delete').click(function () {
            var id = $(this).parents('tr').data('id');
            var _this = $(this);

            layer.confirm('确认删除吗?',
               {icon: 3, title: '提示', offset: 't'},
               function (index) {
                  layer.close(index);

                  $.ajax({
                     type: 'DELETE',
                     url: "/admin/articles/delete/" + id,
                     data: {id: id},
                     success: function (data) {
                        //判断有没有权限
                        if (data && data.status == 0) {
                           layer.msg(data.msg, {
                              icon: 5,
                              time: 2000, //2秒关闭（如果不配置，默认是3秒）
                              offset: 't'
                           });
                           return false;
                        } else {
                           _this.parents('tr').fadeOut(400);
                        }
                     }
                  });
               });
            return false;
         });

         // //上面选中，下面也选中
         // $('.check_all').click(function () {
         //    var checked = $(this).prop('checked');
         //    $('.checked_id').prop('checked', checked);
         // });
         // //下面全选，上面也选中
         // $('.checked_id').click(function () {
         //    var all_length = $('.checked_id').length;
         //    var check_length = $('.checked_id:checked').length;
         //    if (all_length == check_length) {
         //       $('.check_all').prop('checked', true);
         //    } else {
         //       $('.check_all').prop('checked', false);
         //    }
         // });

         // 全选，反选
         $('.check_all').click(function () {
            $('.checked_id').each(function () {
               if (this.checked) {
                  this.checked = false;
               } else {
                  this.checked = true;
               }
            })
         });

         //多选删除
         $('.delete_all').click(function () {
            var check_length = $('.checked_id:checked').length;
            if (check_length == 0) {
               layer.msg('请你至少选中一条', {icon: 2, offset: 't'});
               return false;
            }

            layer.confirm('确认删除选中的 ' + check_length + ' 条吗?',
               {icon: 3, title: '提示', offset: 't'},
               function (index) {
                  layer.close(index);

                  $.ajax({
                     type: 'DELETE',
                     url: '/admin/articles/delete_all',
                     data: $('.checked_id:checked').serialize(),
                     success: function (data) {
                        //判断有没有权限
                        if (data && data.status == 0) {
                           layer.msg(data.msg, {
                              icon: 5,
                              time: 2000, //2秒关闭（如果不配置，默认是3秒）
                              offset: 't'
                           });
                           return false;
                        } else {
                           $('.checked_id:checked').parents('tr').fadeOut(400);
                        }
                     }
                  });
               });
            return false;
         });

         //改变属性---是否置顶
         $('.change_attr').click(function () {
            var id = $(this).parents('tr').data('id');
            var attr = $(this).data('attr');
            var _this = $(this);

            layer.confirm('确认改变吗?',
               {icon: 3, title: '提示', offset: 't'},
               function (index) {
                  layer.close(index);

                  $.ajax({
                     type: 'PATCH',
                     url: '/admin/articles/change',
                     data: {id: id, attr: attr},
                     success: function (data) {
                        //判断有没有权限
                        if (data && data.status == 0) {
                           layer.msg(data.msg, {
                              icon: 5,
                              time: 2000, //2秒关闭（如果不配置，默认是3秒）
                              offset: 't'
                           });
                           return false;
                        } else {
                           _this.toggleClass('fa fa-check-circle fa fa-times-circle');
                        }
                     }
                  })
               });
            return false;
         });
         //排序
         $('.sort').change(function () {
            var info = {
               id: $(this).parents('tr').data('id'),
               sort: $(this).val()
            };

            layer.confirm('确认改变排序吗?',
               {icon: 3, title: '提示', offset: 't'},
               function (index) {
                  layer.close(index);

                  $.ajax({
                     url: "{{:url('articles/sort')}}",
                     data: info,
                     type: 'POST',
                     success: function (data) {
                        //判断有没有权限
                        if (data && data.status == 0) {
                           layer.msg(data.msg, {
                              icon: 5,
                              time: 2000, //2秒关闭（如果不配置，默认是3秒）
                              offset: 't'
                           });
                           return false;
                        } else {
                           window.location.reload();
                        }
                     }
                  });
               });
            return false;
         })
      })
   </script>

</block>



